<template>
    <div class="package">
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 待 发 货 </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <el-card class="box-card">
            <!-- 搜索区域 -->
            <el-input placeholder="根据手机号搜索" v-model="search_mobile" clearable @clear="handle"> </el-input>
            <el-input placeholder="根据名称搜索" v-model="search_name" clearable @clear="handle"> </el-input>
            <el-select class="mr10" v-model="value" placeholder="根据等级搜索" clearable @clear="handle">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-button type="primary" @click="clearAll">清空</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="exportInfo">导出</el-button>

            <!-- 表格区域 -->
            <el-table :data="userInfo" style="width: 100%" border stripe>
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column prop="mobile" label="手机号" align="center" width="112"></el-table-column>
                <el-table-column prop="nickName" label="昵称" align="center"> </el-table-column>
                <el-table-column prop="rank" label="等级" align="center" width="98"></el-table-column>
                <el-table-column prop="referrerNo" label="推荐人手机号" width="125" align="center"></el-table-column>
                <el-table-column prop="referrer" label="推荐人昵称" align="center" width="192"> </el-table-column>
                <el-table-column prop="createdOn" label="注册时间" align="center"> </el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button class="w50" type="primary" size="mini" @click="checkDetail(scope.row)">查看详情</el-button>
                        <el-button class="w50" type="primary" size="mini" @click="resetPassword(scope.row)">重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryobj.pagenum"
                :page-sizes="[20, 30, 50, 100]"
                :page-size="queryobj.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
            <!-- <el-button type="primary" style="margin-top: 5px">首页</el-button>
            <el-button type="primary" style="margin-top: 5px">上一页</el-button>
            <el-button type="primary" style="margin-top: 5px">下一页</el-button>
            <el-button type="primary" style="margin-top: 5px">尾页</el-button> -->
        </el-card>

        <!-- 查看详情面板 -->
        <el-dialog title="会员详情" :visible.sync="detailVisible" width="50%" v-dialogDrag>
            <el-button type="primary" class="ml400" size="large">保存</el-button>
            <el-collapse>
                <el-collapse-item title="会员基本信息" name="1">
                    <el-form ref="form" :model="form" label-width="100px" :inline="true">
                        <!-- 用户头像区域 -->
                        <el-form-item class="flex-full">
                            <img :src="form.portrait" />
                        </el-form-item>
                        <!-- 昵称 -->
                        <el-form-item label="昵称">
                            <el-input v-model="form.nickName"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input v-model="form.mobile"></el-input>
                        </el-form-item>
                        <el-form-item label="等级">
                            <el-select v-model="form.rank" class="w100">
                                <el-option v-for="item in form.rank" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="form.status" class="w100">
                                <el-option v-for="item in form.status" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="推荐人昵称:">
                            <el-input v-model="form.referrer" class="w100"></el-input>
                        </el-form-item>
                        <el-form-item label="推荐人手机号:">
                            <el-input v-model="form.referrerNo"></el-input>
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
                <el-collapse-item title="收货地址列表" name="2">
                    <el-table :data="form.addressList" style="width: 100%">
                        <el-table-column prop="name" label="收货人姓名"> </el-table-column>
                        <el-table-column prop="phone" label="联系电话"> </el-table-column>
                        <el-table-column prop="pca" label="省市区"> </el-table-column>
                        <el-table-column prop="address" label="详细地址"></el-table-column>
                        <el-table-column prop="isdefault" label="是否默认地址">
                            <template slot-scope="scope">
                                <el-checkbox :value="scope.row.isdefault === '是' ? true : false"></el-checkbox>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
                <el-collapse-item title="银行卡列表" name="3">
                    <el-table :data="form.bankList" style="width: 100%">
                        <el-table-column prop="name" label="持卡人"> 1</el-table-column>
                        <el-table-column prop="bankname" label="银行名称"> 1</el-table-column>
                        <el-table-column prop="cardno" label="银行卡号"> 1</el-table-column>
                    </el-table>
                </el-collapse-item>
                <el-collapse-item title="云库存信息" name="4">
                    批发礼包券: <span>{{form.cloudCount}}</span> 个
                    <el-table :data="form.stockList" style="width: 100%">
                        <el-table-column prop="date" label="商品缩略图">
                            <template slot-scope="scope">
                            <img :src="scope.row.thumbnail" alt="">
                            </template>
                        </el-table-column>
                        <el-table-column prop="goodsName" label="商品名称"> 1</el-table-column>
                        <el-table-column prop="standardName" label="规格名称"> 1</el-table-column>
                        <el-table-column prop="count" label="数量"> 1</el-table-column>
                    </el-table>
                </el-collapse-item>
                <el-collapse-item title="优惠券信息" name="5"> </el-collapse-item>
            </el-collapse>
        </el-dialog>
    </div>
</template>

<script>
import { getUserList, getUserDetail, resetPassword } from '../../api/member.js'
export default {
  name: 'mana',
  data () {
    return {
      // 根据手机号搜索
      search_mobile: '',
      // 根据用户名搜索
      search_name: '',
      // 绑定的等级搜索
      value: null,
      // 查看详情面板开关
      detailVisible: false,
      // 用户头像的默认地址
      defaultSrc: '../../assets/img/img.jpg',
      // 用户详情面板用户名
      checked: true,
      queryobj: {
        pagenum: 1,
        pagesize: 20
      },
      // 数据的总条数
      total: 0,
      tableData1: [],
      // 会员列表信息
      userInfo: [],
      // 会员等级信息
      options: [],
      // 会员状态信息
      // 会员的详细信息
      form: {},
      degreeValue: ''
    }
  },
  created () {
    this.getUserInfo()
  },
  mounted () {

  },
  methods: {
    async getUserInfo () {
      const { Data } = await getUserList({
        pageIndex: this.queryobj.pagenum,
        pageSize: this.queryobj.pagesize
      })
      this.userInfo = Data.list
      this.total = Data.paging.totalItemCount
      this.options = Data.rankList
      console.log(Data)
    },
    // 清除所有输入信息
    clearAll () {
      this.search_name = ''
      this.search_mobile = ''
      this.value = ''
    },

    // 根据输入信息查询结果
    async search () {
      const { Data } = await getUserList({
        pageIndex: this.queryobj.pagenum,
        pageSize: this.queryobj.pagesize,
        nickName: this.search_name,
        mobile: this.search_mobile,
        rank: this.value
      })
      this.userInfo = Data.list
      this.total = Data.paging.totalItemCount
      console.log(Data)
    },
    handle () {
      this.search()
    },
    // 导出
    exportInfo () {

    },

    // 查看详情
    async checkDetail (role) {
      this.detailVisible = true
      // console.log(role.id)
      const { Data } = await getUserDetail({
        id: role.id
      })
      this.form = Data
      console.log(this.form)
    },
    // 重置用户密码
    async resetPassword (role) {
      // 确定是否重置用户密码
      const result = await this.$confirm('此操作将重置密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result !== 'confirm') {
        return this.$message.info('已取消操作')
      }
      const data = await resetPassword({
        id: role.id
      })
      console.log(data)
      if (data.Message === '') {
        this.$message.success('重置密码成功')
      }
    },
    // 页面size发生变化时
    handleSizeChange (newPageSize) {
      this.queryobj.pagesize = newPageSize
      //   console.log(newPageSize)
      this.getUserInfo()
    },

    // 当前处于第几页
    handleCurrentChange (newPageNum) {
      this.queryobj.pagenum = newPageNum
      //   console.log(newPageNum)
      this.getUserInfo()
    }
  }
}
</script>

<style scoped>
.el-input {
    width: 220px;
    margin-right: 10px;
}

.droDown .el-button {
    color: #a0a0a0;
}

.el-pagination {
    display: inline-block;
}

.el-table {
    margin-top: 20px;
}

.mr10 {
    margin-right: 10px;
}

.el-form {
    display: flex;
    flex-wrap: wrap;
}
.el-form--inline .el-form-item {
    display: flex;
    flex: 50%;
}
.el-form--inline .el-form-item {
    margin-right: 0px;
}
.el-input__inner {
    padding: 0 30px;
}
.el-form-item__content {
    flex: 1;
}
.flex-full {
    flex: 100% !important;
}
.w100 {
    width: 220px;
}
.ml400 {
    margin-left: 600px;
    margin-bottom: 20px;
}
</style>
